<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div class="header">
  <div class="brand">
    <a routerLink="/">
      <div class="logo"></div>
      <div class="title">Zeppelin</div>
    </a>
  </div>
  <div class="nav">
    <ul nz-menu [nzMode]="'horizontal'">
      <li nz-menu-item [class.ant-menu-item-selected]="noteListVisible">
        <a nz-dropdown class="node-list-trigger" [nzDropdownMenu]="list" [nzTrigger]="'click'" [(nzVisible)]="noteListVisible">Notebook
          <i class="small-icon" nz-icon nzType="caret-down"></i>
        </a>
        <nz-dropdown-menu #list="nzDropdownMenu">
          <zeppelin-node-list [headerMode]="true"
                              class="ant-dropdown-menu padding-sm"
                              *ngIf="noteListVisible"></zeppelin-node-list>
        </nz-dropdown-menu>
      </li>
      <li nz-menu-item routerLinkActive="ant-menu-item-selected">
        <a [routerLink]="['/jobmanager']">Job</a>
      </li>
    </ul>
  </div>
  <div class="user" *ngIf="ticketService.ticket.init">
    <a nz-dropdown class="status" [nzTrigger]="'click'" [nzDropdownMenu]="menu">
      <nz-badge [nzStatus]="connectStatus" [nzText]="ticketService.ticket.screenUsername"></nz-badge>
      <i class="small-icon" nz-icon nzType="caret-down"></i>
    </a>
    <nz-dropdown-menu #menu="nzDropdownMenu">
      <ul nz-menu>
        <li nz-menu-item (click)="about()">About Zeppelin</li>
        <li nz-menu-divider></li>
        <li nz-menu-item routerLinkActive="ant-dropdown-menu-item-selected">
          <a [routerLink]="['/interpreter']">Interpreter</a>
        </li>
        <li nz-menu-item routerLinkActive="ant-dropdown-menu-item-selected">
          <a [routerLink]="['/notebook-repos']">Notebook
                                               Repos
          </a>
        </li>
        <li nz-menu-item routerLinkActive="ant-dropdown-menu-item-selected">
          <a
            [routerLink]="['/credential']">Credential
          </a>
        </li>
<!--        <li nz-menu-item routerLinkActive="ant-dropdown-menu-item-selected">-->
<!--          <a [routerLink]="['/helium']">Helium</a>-->
<!--        </li>-->
        <li nz-menu-item routerLinkActive="ant-dropdown-menu-item-selected">
          <a [routerLink]="['/configuration']">Configuration</a>
        </li>
        <ng-container *ngIf="ticketService.ticket.principal !== 'anonymous'">
          <li nz-menu-divider></li>
          <li nz-menu-item (click)="logout()">Logout</li>
        </ng-container>
        <li nz-menu-divider></li>
        <li nz-menu-item><a href="/">Old Version</a></li>
      </ul>
    </nz-dropdown-menu>
  </div>
  <div class="search">
    <nz-input-group [nzPrefixIcon]="'search'">
      <input type="text"
             nz-input
             placeholder="Search"
             (keyup.enter)="onSearch()"
             [(ngModel)]="queryStr"/>
    </nz-input-group>
  </div>
</div>
